



<template>
  <div class="user-page">
    <h1 class="page-title">用户管理</h1>
    <div class="user-list">
      <div
          v-for="user in users"
          :key="user.id"
          class="user-card"
      >
        <img :src="user.cover" alt="用户头像" class="user-avatar" />
        <div class="user-info">
          <h2 class="username">{{ user.username }}</h2>
          <p class="description">{{ user.description }}</p>
          <p class="gender">性别：{{ user.gender }}</p>
          <p class="birthday">生日：{{ new Date(user.birthday).toLocaleDateString() }}</p>
        </div>
        <div class="user-actions">
          <el-button size="mini" type="primary" @click="openEditDialog(user)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="confirmDelete(user.id)"
          >
            删除
          </el-button>
<!--          <el-button size="mini" type="success">查看详情</el-button>-->
        </div>
      </div>
    </div>

    <!-- 编辑用户弹窗 -->
    <el-dialog v-model="dialogVisible" title="编辑用户信息" width="500px">
      <CoverUpload
          v-model="formData.cover"
          @update:filename="onFilenameUpdate"
      ></CoverUpload>
      <el-form :model="formData">
        <el-form-item label="账号">
          <el-input v-model="formData.account" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formData.password" type="password" />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="formData.username" />
        </el-form-item>
        <!--        <el-form-item label="头像">
                  <el-input v-model="formData.cover" />
                </el-form-item>-->
        <el-form-item label="生日">
          <el-date-picker
              v-model="formData.birthday"
              type="date"
              placeholder="选择生日"
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="formData.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
            <el-radio label="外星人">外星人</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="formData.description" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUser">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>



<script setup>
import { ref } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox, ElDialog } from "element-plus"; // 引入 ElMessageBox
import "element-plus/theme-chalk/index.css"; // 引入样式

// 用户数据
const users = ref([]);
const dialogVisible = ref(false);
const formData = ref({
  id: null,
  account: "",
  password: "",
  username: "",
  cover: "",
  birthday: "",
  gender: "",
  description: "",
});

// 获取所有用户信息
const fetchUsers = async () => {
  try {
    const response = await axios.get("http://localhost:8080/user/showalluser");
    if (response.data.code === 1) {
      users.value = response.data.data;
    } else {
      ElMessage.error("获取用户数据失败");
    }
  } catch (error) {
    ElMessage.error("请求失败，请检查网络连接");
  }
};

// 打开编辑弹窗
const openEditDialog = (user) => {
  Object.assign(formData.value, user);
  dialogVisible.value = true;
};

// 提交更新用户信息
const updateUser = async () => {
  try {
    const response = await axios.post("http://localhost:8080/user/updateuser", {
      id: formData.value.id,
      account: formData.value.account,
      password: formData.value.password,
      username: formData.value.username,
      cover: formData.value.cover,
      birthday: formData.value.birthday,
      gender: formData.value.gender,
      description: formData.value.description,
    });

    if (response.data.code === 1) {
      ElMessage.success("用户信息更新成功");
      dialogVisible.value = false;
      fetchUsers(); // 刷新用户列表
    } else {
      ElMessage.error("用户信息更新失败");
    }
  } catch (error) {
    ElMessage.error("更新失败，请检查网络连接");
  }
};

// 删除用户
const deleteUser = async (id) => {
  try {
    const response = await axios.delete("http://localhost:8080/user/delete", {
      data: { id }, // DELETE 请求的 body 需要通过 data 字段传递
    });
    if (response.data.code === 1) {
      ElMessage.success("用户删除成功");
      fetchUsers(); // 刷新用户列表
    } else {
      ElMessage.error("用户删除失败");
    }
  } catch (error) {
    ElMessage.error("删除失败，请检查网络连接");
  }
};

// 确认删除弹窗
const confirmDelete = (id) => {
  ElMessageBox.confirm(
      "确定要删除该用户吗？此操作不可撤销。",
      "警告",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
  )
      .then(() => {
        deleteUser(id); // 确认后执行删除操作
      })
      .catch(() => {
        ElMessage.info("已取消删除操作"); // 取消时的提示
      });
};

// 页面加载时获取用户数据
fetchUsers();
</script>

<style scoped lang="scss">
.user-page {
  padding: 20px;
  background: #f8f9fa;

  .page-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
  }

  .user-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;

    .user-card {
      width: 250px;
      padding: 20px;
      background: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
      }

      .user-avatar {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 10px;
      }

      .user-info {
        margin-top: 10px;
        text-align: center;

        .username {
          font-size: 18px;
          font-weight: bold;
          color: #333;
        }

        .description {
          margin: 5px 0;
          font-size: 14px;
          color: #666;
        }

        .gender,
        .birthday {
          font-size: 12px;
          color: #999;
        }
      }

      .user-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;

        button {
          flex: 1;
          margin: 0 5px;
        }
      }
    }
  }
}
</style>
